<template>
  <div>
    <div class="topDiv">
      <el-row>
        <el-col :span="18">
          <el-col :span="6">
            <span style="margin-left: 20px">事件类型：</span>
            <span>{{ eventName }}</span>
          </el-col>
          <el-col :span="6">
            <!-- <el-form :model="Reporttime" ref="ruleForm2" class="demo-ruleForm">
              <el-form-item
                label="上报时间"
                :rules="rules.date"
                prop="datetime"
              >
                <el-date-picker
                  size="small"
                  v-model="Reporttime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-form> -->
            <span style="color: red">上报时间：</span>
            <span>
              <el-date-picker
                :rules="rules.date"
                size="small"
                v-model="Reporttime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </span>
          </el-col>
          <el-col :span="6">
            <span>上报卡状态：</span>
            <span>正常</span>
            <span style="float: right"
              ><el-checkbox v-model="clear_check" @change="check_change"
                >取消必填</el-checkbox
              ></span
            >
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="submit2"
            >暂存</el-button
          >

          <el-dropdown
            split-button
            type="primary"
            size="mini"
            style="margin-left: 10px"
            @command="submit"
          >
            提交
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in this.submitObj"
                :key="index"
                :command="item.linkId"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
    <div v-for="(item, index) in json" :key="index">
      <el-card
        class="box-card"
        style="margin-top: 60px"
        v-if="
          json[index].groupName != null &&
          !json[index].groupName.includes('鱼骨图') &&
          !json[index].groupName.includes('填表说明') &&
          !json[index].groupName.includes('事件报告相关信息')
        "
      >
        <div slot="header" class="clearfix">
          <span class="title-text"
            ><i class="el-icon-document-remove"></i
            >{{ json[index].groupName }}</span
          >
        </div>
        <template>
          <el-form
            v-for="(kom, index) in item.groupList"
            :key="index"
            :model="kom"
            ref="ruleForm"
            label-width="auto"
            label-position="left"
            class="demo-ruleForm"
            :style="
              kom.showType == 1 || kom.showType == null
                ? 'width: 50%; display: inline-block;vertical-align: middle;'
                : 'width: 100%; display: inline-block;vertical-align: middle;'
            "
          >
            <el-form-item
              v-if="kom.isnull && !kom.isDisabled && !clear_check"
              class="item"
              style="width: 100%; display: inline-block"
              :label="kom.name"
              :rules="
                kom.inputtype == 1
                  ? rules.value
                  : kom.inputtype == 2
                  ? rules.value
                  : kom.inputtype == 6
                  ? rules.date
                  : kom.inputtype == 8
                  ? rules.date
                  : kom.inputtype == 3
                  ? rules.checkboxValue
                  : kom.inputtype == 10
                  ? rules.checkboxValue
                  : kom.inputtype == 4
                  ? rules.radioValue
                  : kom.inputtype == 5
                  ? rules.textareaValue
                  : rules.selectValue
              "
              :prop="
                kom.inputtype == 1
                  ? 'value'
                  : kom.inputtype == 2
                  ? 'selectValue'
                  : kom.inputtype == 6
                  ? 'date'
                  : kom.inputtype == 8
                  ? 'datetime'
                  : kom.inputtype == 3
                  ? 'checkboxValue'
                  : kom.inputtype == 10
                  ? 'checkboxValue'
                  : kom.inputtype == 4
                  ? 'radioValue'
                  : kom.inputtype == 5
                  ? 'textareaValue'
                  : 'value'
              "
            >
              <p v-if="kom.inputtype == 9">123</p>
              <el-input
                v-if="kom.inputtype == 1"
                @blur="inputClick(kom.code, kom.value)"
                :disabled="kom.isDisabled"
                v-model="kom.value"
                size="mini"
                class="card-ipt"
              ></el-input>
              <el-select
                v-if="kom.inputtype == 2 && kom.code != 'Grade_1'"
                :disabled="kom.isDisabled"
                v-model="kom.selectValue"
                @change="selectChange(kom.code, kom.selectValue)"
                placeholder="请选择"
                size="mini"
                class="card-ipt"
                clearable
              >
                <el-option
                  v-for="item in kom.dicts"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <!-- 设置分类类型开始 -->
              <el-select
                v-if="kom.inputtype == 2 && kom.code == 'Grade_1'"
                :disabled="kom.isDisabled"
                v-model="kom.selectValue"
                @change="selectChange(kom.code, kom.selectValue)"
                placeholder="请选择"
                size="mini"
                class="card-ipt"
                clearable
              >
                <el-option
                  v-show="isFLselectValue == '100'"
                  label="I级:不良事件发生导致患者死亡"
                  value="108"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '101'"
                  label="E级:不良事件造成患者暂时性伤害并需进行治疗或千预"
                  value="104"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '101'"
                  label="F级:不良事件造成患者暂时性伤害并需住院或延长住院时间"
                  value="105"
                >
                </el-option>

                <el-option
                  v-show="isFLselectValue == '101'"
                  label="G级:不良事件造成患者永久性伤害"
                  value="106"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '101'"
                  label="H级:不良事件发生并导致患者需要治疗挽救生命"
                  value="107"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '102'"
                  label="B级:不良事件发生但未累及患者"
                  value="101"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '102'"
                  label="C级:不良事件累及患者但没有造成伤害"
                  value="102"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '102'"
                  label="D级:不良事件累及患者，需进行监测以确保患者不 被伤害，或需通过干预阻止伤害发生"
                  value="103"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '103'"
                  label="A级:环境或条件可能引发不良事件"
                  value="100"
                >
                </el-option>
              </el-select>
              <!-- 设置分类类型结束 -->
              <el-checkbox-group
                v-else-if="kom.inputtype == 3"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-checkbox-group
                v-else-if="kom.inputtype == 10"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-radio-group
                v-model="kom.radioValue"
                @click="radioClick(kom.code, kom.radioValue)"
                v-for="(it, ind) in kom.dicts"
                :key="ind"
                v-else-if="kom.inputtype == 4"
                :disabled="kom.isDisabled"
              >
                <el-radio :label="it.code" style="margin-left: 10px">{{
                  it.name
                }}</el-radio>
              </el-radio-group>
              <el-input
                v-else-if="kom.inputtype == 5"
                :disabled="kom.isDisabled"
                @input="textareaClick(kom.code, indx, kom.textareaValue)"
                type="textarea"
                placeholder="请输入"
                v-model="kom.textareaValue"
                maxlength="2000"
                show-word-limit
                style="width: 80%"
              />
              <el-date-picker
                v-else-if="kom.inputtype == 6"
                :disabled="kom.isDisabled"
                v-model="kom.date"
                value-format="yyyy-MM-dd"
                @click.stop.prevent="dateClick(kom.code, kom.date)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
              <el-date-picker
                v-else-if="kom.inputtype == 8"
                type="datetime"
                :disabled="kom.isDisabled"
                v-model="kom.datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                @click.stop.prevent="dateClick(kom.code, kom.datetime)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="kom.isDisabled || !kom.isnull || clear_check"
              style="width: 100%; display: inline-block"
              :label="kom.name"
            >
              <el-input
                v-if="kom.inputtype == 1"
                :disabled="kom.isDisabled"
                @blur="inputClick(kom.code, kom.value)"
                v-model="kom.value"
                size="mini"
                class="card-ipt"
              ></el-input>
              <!-- <el-select
                v-if="kom.inputtype == 2"
                :disabled="kom.isDisabled"
                v-model="kom.selectValue"
                @change="selectChange(kom.code, kom.selectValue)"
                placeholder="请选择"
                size="mini"
                class="card-ipt"
                clearable
              >
                <el-option
                  v-for="item in kom.dicts"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select> -->
              <el-select
                v-if="kom.inputtype == 2 && kom.code != 'Grade_1'"
                :disabled="kom.isDisabled"
                v-model="kom.selectValue"
                @change="selectChange(kom.code, kom.selectValue)"
                placeholder="请选择"
                size="mini"
                class="card-ipt"
                clearable
              >
                <el-option
                  v-for="item in kom.dicts"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <!-- 设置分类类型开始 -->
              <el-select
                v-if="kom.inputtype == 2 && kom.code == 'Grade_1'"
                :disabled="kom.isDisabled"
                v-model="kom.selectValue"
                @change="selectChange(kom.code, kom.selectValue)"
                placeholder="请选择"
                size="mini"
                class="card-ipt"
                clearable
              >
                <el-option
                  v-show="isFLselectValue == '100'"
                  label="I级:不良事件发生导致患者死亡"
                  value="108"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '101'"
                  label="E级:不良事件造成患者暂时性伤害并需进行治疗或千预"
                  value="104"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '101'"
                  label="F级:不良事件造成患者暂时性伤害并需住院或延长住院时间"
                  value="105"
                >
                </el-option>

                <el-option
                  v-show="isFLselectValue == '101'"
                  label="G级:不良事件造成患者永久性伤害"
                  value="106"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '101'"
                  label="H级:不良事件发生并导致患者需要治疗挽救生命"
                  value="107"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '102'"
                  label="B级:不良事件发生但未累及患者"
                  value="101"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '102'"
                  label="C级:不良事件累及患者但没有造成伤害"
                  value="102"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '102'"
                  label="D级:不良事件累及患者，需进行监测以确保患者不 被伤害，或需通过干预阻止伤害发生"
                  value="103"
                >
                </el-option>
                <el-option
                  v-show="isFLselectValue == '103'"
                  label="A级:环境或条件可能引发不良事件"
                  value="100"
                >
                </el-option>
              </el-select>
              <!-- 设置分类类型结束 -->
              <el-checkbox-group
                v-else-if="kom.inputtype == 3"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-checkbox-group
                v-else-if="kom.inputtype == 10"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-radio-group
                v-model="kom.radioValue"
                @click="radioClick(kom.code, kom.radioValue)"
                v-for="(it, ind) in kom.dicts"
                :key="ind"
                v-else-if="kom.inputtype == 4"
                :disabled="kom.isDisabled"
              >
                <el-radio :label="it.code" style="margin-left: 10px">{{
                  it.name
                }}</el-radio>
              </el-radio-group>
              <el-input
                v-else-if="kom.inputtype == 5"
                :disabled="kom.isDisabled"
                @input="textareaClick(kom.code, indx, kom.textareaValue)"
                type="textarea"
                placeholder="请输入"
                v-model="kom.textareaValue"
                maxlength="2000"
                show-word-limit
                style="width: 80%"
              />
              <el-date-picker
                v-else-if="kom.inputtype == 6"
                :disabled="kom.isDisabled"
                v-model="kom.date"
                value-format="yyyy-MM-dd"
                @click.stop.prevent="dateClick(kom.code, kom.date)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
              <el-date-picker
                v-else-if="kom.inputtype == 8"
                :disabled="kom.isDisabled"
                type="datetime"
                v-model="kom.datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                @click.stop.prevent="dateClick(kom.code, kom.datetime)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </template>
      </el-card>
      <el-card
        class="box-card"
        style="margin-top: 60px"
        v-if="
          json[index].groupName != null &&
          !!json[index].groupName.includes('鱼骨图')
        "
      >
        <div slot="header" class="clearfix">
          <span class="title-text"
            ><i class="el-icon-document-remove"></i
            >{{ json[index].groupName }}</span
          >
        </div>
        <div v-for="(kom, indx) in item.groupList" :key="indx" class="wrap">
          <div
            class="divwrap"
            style="width: 100%; float: left"
            v-if="kom.children.length != 0"
          >
            <span class="ipt-text red dis" v-if="kom.isnull == true">
              {{ kom.name }}
            </span>
            <span class="ipt-text dis yuguName" v-else>{{ kom.name }}</span>
            <div
              class="yugudiv"
              v-for="(childrenItem, childrenIndex) in kom.children"
              :key="childrenIndex"
            >
              <span class="ipt-text red dis" v-if="childrenItem.isnull == true">
                {{ childrenItem.name }}
              </span>
              <span class="ipt-text dis yuguspan" v-else style="">{{
                childrenItem.name
              }}</span>
              <div v-if="childrenItem.inputtype == 7" class="yugudiv2">
                <el-checkbox-group
                  v-model="kom.yuguValue"
                  @click="yuguClick(kom.code, indx, kom.yuguValue)"
                  :disabled="childrenItem.isDisabled"
                >
                  <el-checkbox
                    v-for="(item, i) in childrenItem.ygtList"
                    :key="i"
                    :label="item.code"
                    style="margin-left: 5px; margin-right: 5px; float: left"
                    >{{ item.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </div>
          <div class="yugudivnull" v-if="kom.children.length == 0">
            <span class="ipt-text red dis" v-if="kom.isnull == true">
              {{ kom.name }}
            </span>
            <span class="ipt-text dis yugudivnullspan" v-else>{{
              kom.name
            }}</span>
            <div v-if="kom.inputtype == 7" style="height: 100px">
              <el-checkbox-group
                v-model="kom.yuguValue"
                @click="yuguClick(kom.code, indx, kom.yuguValue)"
                :disabled="kom.isDisabled"
              >
                <el-checkbox
                  v-for="(item, o) in kom.ygtList"
                  :key="o"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </el-card>
      <el-card
        class="box-card"
        style="margin-top: 60px"
        v-if="
          json[index].groupName != null &&
          !!json[index].groupName.includes('填表说明')
        "
      >
        <div slot="header" class="clearfix">
          <span class="title-text"
            ><i class="el-icon-document-remove"></i
            >{{ json[index].groupName }}</span
          >
        </div>
        <div v-for="(kom, indx) in item.groupList" :key="indx" class="wrap">
          <div style="margin-bottom: 5px">
            <p>
              {{ kom.name }}
            </p>
          </div>
        </div>
      </el-card>
      <el-card
        class="box-card"
        style="margin-top: 60px"
        v-if="
          json[index].groupName != null &&
          !!json[index].groupName.includes('事件报告相关信息')
        "
      >
        <div slot="header" class="clearfix">
          <span class="title-text"
            ><i class="el-icon-document-remove"></i
            >{{ json[index].groupName }}</span
          >
        </div>
        <template>
          <el-form
            v-for="(kom, index) in item.groupList"
            :key="index"
            :model="kom"
            ref="ruleForm"
            label-width="auto"
            class="demo-ruleForm"
            :style="
              kom.showType == 1
                ? 'width: 50%; display: inline-block;vertical-align: middle;'
                : kom.inputtype == 5
                ? 'width: 100%; display: inline-block;vertical-align: middle;'
                : kom.inputtype == 10
                ? 'width: 100%; display: inline-block;vertical-align: middle;'
                : kom.showType == null
                ? 'width: 50%; display: inline-block;vertical-align: middle;'
                : 'width: 100%; display: inline-block;vertical-align: middle;'
            "
          >
            <el-form-item
              v-if="kom.isnull && !kom.isDisabled"
              class="item"
              style="width: 100%; display: inline-block"
              :label="kom.name"
              :rules="
                kom.inputtype == 1
                  ? rules.value
                  : kom.inputtype == 2
                  ? rules.value
                  : kom.inputtype == 6
                  ? rules.date
                  : kom.inputtype == 8
                  ? rules.date
                  : kom.inputtype == 3
                  ? rules.checkboxValue
                  : kom.inputtype == 10
                  ? rules.checkboxValue
                  : kom.inputtype == 4
                  ? rules.radioValue
                  : kom.inputtype == 5
                  ? rules.textareaValue
                  : rules.selectValue
              "
              :prop="
                kom.inputtype == 1
                  ? 'value'
                  : kom.inputtype == 2
                  ? 'selectValue'
                  : kom.inputtype == 6
                  ? 'date'
                  : kom.inputtype == 8
                  ? 'datetime'
                  : kom.inputtype == 3
                  ? 'checkboxValue'
                  : kom.inputtype == 10
                  ? 'checkboxValue'
                  : kom.inputtype == 4
                  ? 'radioValue'
                  : kom.inputtype == 5
                  ? 'textareaValue'
                  : 'value'
              "
            >
              <p v-if="kom.inputtype == 9">123</p>
              <el-input
                v-if="kom.inputtype == 1"
                @blur="inputClick(kom.code, kom.value)"
                :disabled="kom.isDisabled"
                v-model="kom.value"
                size="mini"
                class="card-ipt"
              ></el-input>
              <el-select
                v-if="kom.inputtype == 2"
                :disabled="kom.isDisabled"
                v-model="kom.selectValue"
                @change="selectChange(kom.code, kom.selectValue)"
                placeholder="请选择"
                size="mini"
                class="card-ipt"
                clearable
              >
                <el-option
                  v-for="item in kom.dicts"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <el-checkbox-group
                v-else-if="kom.inputtype == 3"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-checkbox-group
                v-else-if="kom.inputtype == 10"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-radio-group
                v-model="kom.radioValue"
                @click="radioClick(kom.code, kom.radioValue)"
                v-for="(it, ind) in kom.dicts"
                :key="ind"
                v-else-if="kom.inputtype == 4"
                :disabled="kom.isDisabled"
              >
                <el-radio :label="it.code" style="margin-left: 10px">{{
                  it.name
                }}</el-radio>
              </el-radio-group>
              <el-input
                v-else-if="kom.inputtype == 5"
                :disabled="kom.isDisabled"
                @input="textareaClick(kom.code, indx, kom.textareaValue)"
                type="textarea"
                placeholder="请输入"
                v-model="kom.textareaValue"
                maxlength="2000"
                show-word-limit
                style="width: 80%"
              />
              <el-date-picker
                v-else-if="kom.inputtype == 6"
                :disabled="kom.isDisabled"
                v-model="kom.date"
                value-format="yyyy-MM-dd"
                @click.stop.prevent="dateClick(kom.code, kom.date)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
              <el-date-picker
                v-else-if="kom.inputtype == 8"
                type="datetime"
                :disabled="kom.isDisabled"
                v-model="kom.datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                @click.stop.prevent="dateClick(kom.code, kom.datetime)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="kom.isDisabled || !kom.isnull"
              style="width: 100%; display: inline-block"
              :label="kom.name"
            >
              <el-input
                v-if="kom.inputtype == 1"
                :disabled="kom.isDisabled"
                @blur="inputClick(kom.code, kom.value)"
                v-model="kom.value"
                size="mini"
                class="card-ipt"
              ></el-input>
              <el-select
                v-if="kom.inputtype == 2"
                :disabled="kom.isDisabled"
                v-model="kom.selectValue"
                @change="selectChange(kom.code, kom.selectValue)"
                placeholder="请选择"
                size="mini"
                class="card-ipt"
                clearable
              >
                <el-option
                  v-for="item in kom.dicts"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <el-checkbox-group
                v-else-if="kom.inputtype == 3"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-checkbox-group
                v-else-if="kom.inputtype == 10"
                :disabled="kom.isDisabled"
                v-model="kom.checkboxValue"
                @click="checkboxClick(kom.code, kom.checkboxValue)"
              >
                <el-checkbox
                  v-for="(item, index) in kom.dicts"
                  :key="index"
                  :label="item.code"
                  style="margin-left: 5px; margin-right: 5px; float: left"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <el-radio-group
                v-model="kom.radioValue"
                @click="radioClick(kom.code, kom.radioValue)"
                v-for="(it, ind) in kom.dicts"
                :key="ind"
                v-else-if="kom.inputtype == 4"
                :disabled="kom.isDisabled"
              >
                <el-radio :label="it.code" style="margin-left: 10px">{{
                  it.name
                }}</el-radio>
              </el-radio-group>
              <el-input
                v-else-if="kom.inputtype == 5"
                :disabled="kom.isDisabled"
                @input="textareaClick(kom.code, indx, kom.textareaValue)"
                type="textarea"
                placeholder="请输入"
                v-model="kom.textareaValue"
                maxlength="2000"
                show-word-limit
                style="width: 80%"
              />
              <el-date-picker
                v-else-if="kom.inputtype == 6"
                :disabled="kom.isDisabled"
                v-model="kom.date"
                value-format="yyyy-MM-dd"
                @click.stop.prevent="dateClick(kom.code, kom.date)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
              <el-date-picker
                v-else-if="kom.inputtype == 8"
                :disabled="kom.isDisabled"
                type="datetime"
                v-model="kom.datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                @click.stop.prevent="dateClick(kom.code, kom.datetime)"
                size="mini"
                class="card-ipt"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </template>
        <div>
          信息收集表：
          <el-select v-model="to_up_code" placeholder="请选择" size="mini">
            <el-option
              v-for="item in SJBlist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button type="primary" size="mini" plain @click="to_open"
            >跳转</el-button
          >
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      json: {},
      sendObj: {},
      submitObj: null,
      eventCode: "",
      eventName: "",
      Reporttime: "",
      rules: {
        value: [{ required: true, message: "此项为必选项", trigger: "blur" }],
        selectValue: [
          { required: true, message: "此项为必选项", trigger: "change" },
        ],
        date: [
          {
            required: true,
            message: "此项为必选项",
            trigger: "change",
          },
        ],
        textareaValue: [
          { required: true, message: "此项为必选项", trigger: "blur" },
        ],
        radioValue: [
          { required: true, message: "此项为必选项", trigger: "change" },
        ],
        checkboxValue: [
          { required: true, message: "此项为必选项", trigger: "change" },
        ],
      },
      tip: [],
      isEventNo: "",
      clear_check: false,
      isFLselectValue: "",
      SJBlist: [],
      to_up_code: "",
    };
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    if (this.$route) {
      if (this.$route.query.flag) {
        this.isShowFlag = true;
        this.eventCode = this.$route.query.eventCode;
        this.eventName = this.$route.query.eventName;
        this.getInit();
        return;
      }
      if (this.$route.query.eventCode) {
        this.isShowFlag = true;
        this.eventCode = this.$route.query.eventCode;
        this.eventName = this.$route.query.eventName;
        this.getInit();
      }
    }
  },
  mounted() {
    this.getSJBlist();
  },
  methods: {
    getInit() {
      this.$get(
        `/Aers/ReportEvent/GetFirstLinks?eventCode=${this.eventCode}`
      ).then((res) => {
        if (res.code == 200) {
          this.submitObj = res.data;
        }
      });
      this.$get(
        `/Aers/ReportEvent/GetRenderData?eventCode=${this.eventCode}`
      ).then((res) => {
        if (res.code == 200) {
          var list = res.data;

          for (let index = 0; index < list.length; index++) {
            for (let i = 0; i < list[index].groupList.length; i++) {
              if (list[index].groupList[i].inputtype === 1) {
                list[index].groupList[i].value = "";
              }
              if (list[index].groupList[i].inputtype === 2) {
                list[index].groupList[i].selectValue = [];
              }
              if (list[index].groupList[i].inputtype === 5) {
                list[index].groupList[i].textareaValue = null;
              }
              if (list[index].groupList[i].inputtype === 4) {
                list[index].groupList[i].radioValue = "";
              }
              if (list[index].groupList[i].inputtype === 6) {
                list[index].groupList[i].date = "";
              } else if (list[index].groupList[i].inputtype === 3) {
                list[index].groupList[i].checkboxValue = [];
              } else if (list[index].groupList[i].inputtype === 10) {
                list[index].groupList[i].checkboxValue = [];
              } else if (list[index].groupList[i].inputtype == 7) {
                list[index].groupList[i].yuguValue = [];
              }
            }
          }
          for (let index = 0; index < list.length; index++) {
            for (let i = 0; i < list[index].groupList.length; i++) {
              this.sendObj[list[index].groupList[i].code] = "";
            }
          }

          // console.log( this.sendObj);
          this.json = list;
          console.log(this.json);
          if (this.$route.query.flag) {
            this.getInit2(this.$route.query.id);
          }
        }
      });
    },
    getInit2(id) {
      this.$get("/Aers/ReportEventmainTemp/GetItem?id=" + id).then((res) => {
        this.json = JSON.parse(res.data.json).list;
        this.Reporttime = res.data.createDate;
        console.log(this.json);
      });
    },
    inputClick(code, value) {
      for (let key in this.sendObj) {
        if (key == code) {
          this.sendObj[key] = value;
        }
      }
    },
    selectChange(code, value) {
      for (let key in this.sendObj) {
        if (key == code) {
          this.sendObj[key] = value;
        }
      }
      if (code == "Grade") {
        this.isFLselectValue = value;
      }
      console.log(code, value);
    },
    checkboxClick(code, value) {
      for (let key in this.sendObj) {
        if (key == code) {
          this.sendObj[key] = value;
        }
      }
    },
    radioClick(code, value) {
      for (let key in this.sendObj) {
        if (key == code) {
          this.sendObj[key] = value;
        }
      }
    },
    textareaClick(code, value) {
      for (let key in this.sendObj) {
        if (key == code) {
          this.sendObj[key] = value;
        }
      }
    },
    dateClick(code, value) {
      debugger;
      for (let key in this.sendObj) {
        if (key == code) {
          this.sendObj[key] = value;
        }
      }
    },
    yuguClick(code, value) {
      for (let key in this.sendObj) {
        if (key == code) {
          this.sendObj[key] = value;
        }
      }
    },
    submit(command) {
      this.sendObj;
      this.sendObj.LinkId = command;
      this.sendObj.EventCode = this.$route.query.eventCode;
      this.sendObj.Reporttime = this.Reporttime;
      this.sendObj.list = this.json;
      this.sendObj.tempEventno = this.$route.query.eventno
        ? this.$route.query.eventno
        : "";
      var reques = true;
      this.tip = [];
      var tip = [];
      for (var i in this.$refs["ruleForm"]) {
        var isnull = this.$refs["ruleForm"][i].model.isnull;
        var inputtype = this.$refs["ruleForm"][i].model.inputtype;
        this.$refs["ruleForm"][i].validate((valid) => {
          if (!valid) {
            if (isnull && inputtype === 1) {
              if (!this.$refs["ruleForm"][i].model.value) {
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                reques = false;
                return;
              }
            }
            if (isnull && inputtype === 2) {
              if (!this.$refs["ruleForm"][i].model.selectValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 3) {
              if (!this.$refs["ruleForm"][i].model.checkboxValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 10) {
              if (!this.$refs["ruleForm"][i].model.checkboxValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 4) {
              if (!this.$refs["ruleForm"][i].model.radioValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 5) {
              if (!this.$refs["ruleForm"][i].model.textareaValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 6) {
              if (!this.$refs["ruleForm"][i].model.date) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 7) {
              if (!this.$refs["ruleForm"][i].model.yuguValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            reques = false;
            this.tip = tip;
          } else {
            reques = false;
            return;
          }
        });
      }
      console.log(tip);
      if (tip.length == 0) {
        console.log(this.sendObj);
        this.$post("/Aers/ReportEvent/PostEvent", this.sendObj).then((res) => {
          if (res.code == 200) {
            this.$message.success("提交成功");
            this.getInit();
            this.resetForm();
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        // this.$message.error(this.tip + "未填写");
        this.$message.error("请完整填写必填项！");
      }
    },
    submit2() {
      this.sendObj;
      // this.sendObj.LinkId = command;
      this.sendObj.EventCode = this.$route.query.eventCode;
      this.sendObj.Reporttime = this.Reporttime;
      this.sendObj.list = this.json;
      this.sendObj.Eventno = this.isEventNo
        ? this.isEventNo
        : this.$route.query.eventno
        ? this.$route.query.eventno
        : "";
      console.log(this.sendObj);
      var reques = true;
      this.tip = [];
      var tip = [];
      for (var i in this.$refs["ruleForm"]) {
        console.log(this.$refs["ruleForm"][i]);
        var isnull = this.$refs["ruleForm"][i].model.isnull;
        var inputtype = this.$refs["ruleForm"][i].model.inputtype;
        this.$refs["ruleForm"][i].validate((valid) => {
          if (!valid) {
            if (isnull && inputtype === 1) {
              if (!this.$refs["ruleForm"][i].model.value) {
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                reques = false;
                return;
              }
            }
            if (isnull && inputtype === 2) {
              if (!this.$refs["ruleForm"][i].model.selectValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 3) {
              if (!this.$refs["ruleForm"][i].model.checkboxValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 10) {
              if (!this.$refs["ruleForm"][i].model.checkboxValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 4) {
              if (!this.$refs["ruleForm"][i].model.radioValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 5) {
              if (!this.$refs["ruleForm"][i].model.textareaValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 6) {
              if (!this.$refs["ruleForm"][i].model.date) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            if (isnull && inputtype === 7) {
              if (!this.$refs["ruleForm"][i].model.yuguValue) {
                reques = false;
                var item =
                  this.$refs["ruleForm"][i].model.groupname +
                  "-" +
                  this.$refs["ruleForm"][i].model.name;
                tip.push(item);
                return;
              }
            }
            reques = false;
            this.tip = tip;
          } else {
            reques = false;
            return;
          }
        });
      }
      if (this.tip.length == 0) {
        console.log(this.sendObj);
        this.$post("/Aers/ReportEventmainTemp/SaveEvent", this.sendObj).then(
          (res) => {
            if (res.code == 200) {
              this.$message.success("暂存成功");
              this.isEventNo = res.data.eventno;
              // this.getInit();
              // this.resetForm();
            } else {
              this.$message.error(res.message);
            }
          }
        );
      } else {
        // this.$message.error(this.tip + "未填写");
        this.$message.error("请完整填写必填项！");
      }
    },
    resetForm() {
      for (var i in this.$refs["ruleForm"]) {
        this.$refs["ruleForm"][i].resetFields();
      }
    },
    check_change(val) {
      console.log(val);
    },
    getSJBlist() {
      var body = {
        currentPage: 1,
        pageSize: 15,
        filter: {
          key: "",
          withDisable: true,
          typeCode: 2001,
          typeName: "",
          startTime: "",
          endTime: "",
          delFlag: false,
        },
      };
      this.$post("/Aers/ZdEvent/GetList", body).then((res) => {
        this.SJBlist = res.data.list;
      });
    },
    to_open() {
      var row = {};
      for (var i in this.SJBlist) {
        if (this.SJBlist[i].id == this.to_up_code) {
          row = this.SJBlist[i];
        }
      }
      console.log(row);
      window.open(
        "/#/operation?eventCode=" +
          row.code +
          "&eventName=" +
          row.name +
          "&Token=" +
          localStorage.getItem("Token")
      );
      // this.$router.push(
      //   "/operation?eventCode=" +
      //     row.code +
      //     "&eventName=" +
      //     row.name +
      //     "&Token=" +
      //     localStorage.getItem("Token")
      // );
    },
  },
};
</script>
<style scoped lang="scss">
.topDiv {
  height: 60px;
  width: 100%;
  line-height: 60px;
  position: fixed;
  top: 0;
  z-index: 999;
  background: #e8f2fe;
}
.title-text {
  color: #1e8bc2;
  font-weight: bold;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-card .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px;
}
.card-ipt {
  width: 200px;
}
.red {
  font-weight: 600;
  color: #ff0000;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.ipt-area {
  margin-top: 20px;
}
.mt20 {
  margin-top: 20px;
}
.border {
  border-bottom: 1px solid #ccc;
}
.ipt_div {
  width: 50%;
  /* min-height: 50px; */
  float: left;
  margin-bottom: 10px;
}
.ipt_divw {
  width: 100%;
  min-height: 80px;
  float: left;
  margin-bottom: 10px;
}
.ipt_divw span {
  width: 100%;
  height: 30px;
  display: block;
}
.dis {
  width: 180px;
  display: block;
  float: left;
}
.yuguName {
  width: 300px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
}
.wrap:nth-child(2) .divwrap .yuguName {
  width: 300px;
  height: 660px;
  line-height: 660px;
  border-bottom: 1px solid #ccc;
}

.yugudiv {
  height: 60px;
  white-space: nowrap;
  overflow: hidden;
}
.yuguspan {
  width: 100px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
}
.yugudiv2 {
  height: 60px;
  border-bottom: 1px solid #ccc;
}
.divwrap .yugudiv:nth-child(2) {
  height: 120px !important;
}
.divwrap .yugudiv:nth-child(2) .yuguspan {
  width: 100px;
  height: 120px !important;
  line-height: 120px !important;
  border-bottom: 1px solid #ccc;
}
.divwrap .yugudiv:nth-child(2) .yugudiv2 {
  height: 120px !important;
  border-bottom: 1px solid #ccc !important;
}
.yugudivnull {
  width: 100%;
  float: left;
  border-bottom: 1px solid #ccc;
  height: 80px;
}
.yugudivnullspan {
  display: block;
  width: 300px;
  height: 80px;
  line-height: 80px;
}
.box-warp {
  float: left;
}
.box-warp > a {
  display: flex;
  color: #333;
  margin-left: 10px;
}
.p {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
}
.checked {
  color: red !important;
}
.el-form-item {
  margin-bottom: 0;
}
::v-deep .item .el-form-item__label {
  color: red;
}
::v-deep .el-form-item__error {
  padding-top: 0;
  top: -5px;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #000;
  cursor: not-allowed;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000;
}
</style>
